<template>
  <div class="notify-content">
    <div class="notify-group" :style="{ 'background-color': background }">
        <img class="alert-icon" src="@/assets/image/icon/drawing_board.png">
        <div class="alert-text" :style="{ 'color': color }">{{tpi}}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    tpi: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      background: window.isDark ? "#2C150D" : "#FDEADE",
      color:window.isDark ? "#DB6B42" : "#ED6F21",
    };
  },
  methods: {
    versionClick() {
      this.$emit('versionClick')
    }
  },
};
</script>

<style scoped>
.notify-content {
  position: absolute;
  top: 7.2rem;
  padding: 0 1.6rem;
  width: 100%;
}

.notify-content .notify-group {
    border-radius: 2rem;
    padding:1.2rem;
    display: flex;
    align-items: center;
}
.notify-group .alert-icon{
    width: 2.2rem;
    height: 2.2rem;
}
.notify-group .alert-text{
    font-size: 1.6rem;
    letter-spacing: 0px;
    padding-left:1.7rem;
    flex:1;
    white-space: normal;
}
</style>